/* 
    友情链接
*/
var form = layui.form;


// 获取友情链接列表
function getlink() {
    $.ajax({
        url: '/admin/links',
        success: function (res) {
            // console.log(res);

            let strHtml = template('get-link', res);

            $('tbody').html(strHtml);
        }
    })
}

getlink();


let linkIndex = null;
// 点击显示弹出层
$('.addlink').on('click', function () {

    // 弹出层
    linkIndex = layer.open({
        title: '添加友情链接',
        type: 1,
        area: ['500px', '350px'],
        content: $('#eject-link').html()  // 利用html()获取所有的标签
    });


});


// 下面个事件需要用到事件委托，因为是利用layui创建出来的弹出层
// 点击上传图片
$('body').on('click', '.upload-img', function () {
    // 触发文件上传按钮
    $('#file').trigger('click');
});

// 图片预览
$('body').on('change', '#file', function () {

    // 预览图片显示
    $('.img-preview').show();
    // 保证取消选择图片 不报错
    if (this.files.length > 0) {
        // 获取文件对象
        let fileObj = this.files[0];

        // 创建临时预览 url
        var url = URL.createObjectURL(fileObj);

        // 把 url 放入img的src里
        $('.img-preview').attr('src', url);
    }

});

// 添加友情链接---------------------------------------------
$('body').on('submit', '#form-link', function (e) {
    e.preventDefault();

    let fd = new FormData($('#form-link')[0]);

    // fd.forEach((value, key) => {
    //     console.log(key, value);
    // });

    $.ajax({
        type: 'POST',
        url: '/admin/links',
        data: fd,
        processData: false,   // 不要处理数据（不要把fd对象转换成查询字符串）
        contentType: false,   // 不要设置Content-Type这个请求头
        success: function (res) {
            // console.log(res);
            // 提示
            layer.msg(res.message);

            if (res.status == 0) {

                // 关闭弹出层
                layer.close(linkIndex);
                // 重新渲染页面
                getlink();
            }

        }
    });
});



// 删除友情链接---------------------------------------------------------

// 箭头函数没有this指向
$('tbody').on('click', '.delete', function () {
    // 获取当前被删除的id
    let index = $(this).data('index');

    $.ajax({
        type: 'DELETE',
        url: '/admin/links/' + index,
        success: function (res) {
            //询问框
            layer.confirm('您确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                // 删除提示
                layer.msg(res.message);
                // 重新渲染页面
                getlink();
                layer.close(index);
            });
        }
    });
});

// 编辑友情链接------------------------------------------------------
let editIndex = null;
let editId = null;
$('tbody').on('click', '.edit', function () {

    editId = $(this).data('id');

    // 数据回填
    $.ajax({
        url: '/admin/links/' + editId,
        success: function (res) {
            console.log(res);
            // 弹出层
            editIndex = layer.open({
                title: '编辑友情链接',
                type: 1,
                area: ['500px', '350px'],
                content: $('#edit-link').html(),  // 利用html()获取所有的标签
            });
            
            $('.img-preview').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon);

            // 回退数据的时候，给文件域回填了一个字符串，所有报错了，
            // 文件域只能回填文件，不能回填字符串，所有回填之前，把 linkicon 删除了
            delete res.data.linkicon;
            form.val('edit-luayui', res.data);
        }
    })
});

// 提交编辑------------------------------------------------
$('body').on('submit', '#form-edit', function (e) {
    e.preventDefault();
    
    let fd = new FormData(this);
    // fdObj.forEach( (value, key) => {
    //     console.log(value, key);
    // })
    $.ajax({
        type: 'PUT',
        url: '/admin/links/'+ editId,
        data: fd,
        processData: false,   // 不要处理数据（不要把fd对象转换成查询字符串）
        contentType: false,   // 不要设置Content-Type这个请求头
        success: function (res) {

            layer.msg(res.message);
            // 渲染页面
            getlink();
            // 关闭弹出层
            layer.close(editIndex);
        }
    })
});